<template>
	<div class="table">
		<div class="container">
			<div class="handle-box" style="text-align: right;margin-bottom: 20px;">
				<el-button type="primary" icon="add" class="handle-add mr10" @click="add">添加</el-button>
			</div>
			<el-table :data="tableData" border style="width: 100%" ref="tableData">
				<el-table-column prop="deptName" label="部门名称" sortable width="150">
				</el-table-column>
				<el-table-column prop="content" label="部门简介">
				</el-table-column>
				<el-table-column prop="longitude" label="打卡精度">
				</el-table-column>
				<el-table-column prop="latitude" label="打卡维度">
				</el-table-column>
				<el-table-column prop="radius" label="打卡半径(单位:米)">
				</el-table-column>
				<el-table-column label="操作" width="280">
					<template slot-scope="scope">
						<el-button size="small" @click="handleRule(scope.$index,scope.row)">设置考勤规则</el-button>
						<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
						<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="pagination">
				<el-pagination @current-change="getTableList" :page-size="size" :current-page.sync="pageNum" layout="prev, pager, next"
				 :page-count="pages" :total="total">
				</el-pagination>
			</div>
		</div>
		<!-- 删除提示框 -->
		<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
			<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteRow">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				size: 10,
				pageNum: 1,
				pages: null,
				total: 1,
				url: './static/vuetable.json',
				tableData: [],
				cur_page: 1,
				multipleSelection: [],
				select_cate: '',
				select_word: '',
				del_list: [],
				delVisible: false,
				form: {
					mechanismId: '',
					deptId: '',
					deptName: '',
					content: '',
					dept_app_id: '',
					dept_appsecret: '',
					id: ''
				},
				items: [{}],
				dataRec: [],
				dataTree: [],
				defaultProps: {
					children: 'list',
					label: 'name'
				}

			}
		},
		watch: {
			$route(newValue, oldValue) {
				if (newValue.path == "/dept") {
					this.getTableList();
				}
			}
		},
		mounted() {
			this.getTableList();
		},
		methods: {
			add() {
				this.$router.push({
					name: '/dept/add'
				})
			},
			queryByName() {
				this.tableData = [];
				this.total = 1;
				var that = this;
				this.HttpUtil.encryptGet(
					this,
					this.Global.URLPATH.DEPT_QUERY, {
						token: sessionStorage.getItem("token"),
						type: 1,
						pageNum: that.cur_page,
						deptName: this.select_word
					},
					function(data) {
						that.total = data.data.total;
						that.tableData = data.data.list;
					},
					function(data) { //访问失败
						that.tableData = [];
						that.total = 1;
						that.$message.success(data.msg);
					});
			},
			getMechanism() {
				var that = this;

				this.HttpUtil.encryptGet(
					this,
					this.Global.URLPATH.MECHANISM_NOPAGE_QUERY, {
						token: sessionStorage.getItem("token")
					},
					function(data) {
						if (data.data != null && data.data != undefined) {
							for (var i in data.data) {
								data.data[i].index = parseInt(i) + 1;
							}
							that.dataTree = data.data;

						}

					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});
			},

			//获取表格数据			
			getTableList(pageNum) {
				var that = this;
				// this.tableData = [];
				// this.total = 0;
				pageNum = pageNum ? pageNum : that.pageNum;
				that.HttpUtil.encryptGet(
					that,
					that.Global.URLPATH.DEPT_QUERY, {
						token: sessionStorage.getItem("token"),
						pageNum: pageNum
					},
					function(data) {
						that.pages = data.data.pages;
						that.total = data.data.total;
						that.pageNum = data.data.pageNum;
						that.tableData = data.data.list

					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});
			},
			//设置规则
			handleRule(index,row) {
				const item = this.tableData[index];
				const map = {
					"deptId": row.id,
					"deptName": row.deptName,
					"mechanismId": row.mechanismId,
				}
				sessionStorage.setItem(this.Global.SESSION_CONFIG.DEPT_RULE_THIS, JSON.stringify(map));
				this.$router.push({
					name: 'rule'
				})
			},
			getRule(deptId) {
				var that = this;
				this.HttpUtil.encryptGet(
					this,
					this.Global.URLPATH.RULE_QUERY, {
						deptId: deptId
					},
					function(data) {
						if (data.data != undefined) {

							for (var i in data.data) {
								// that.items.push({startTime: data.data[i].startTime, endTime: data.data[i].endTime})
								that.addRule(data.data[i]);
							}
							that.dataRec = data.data;

						}

					},
					function(data) { //访问失败
						//that.$message.success(data.msg);
					});
			},
			//编辑
			handleEdit(row) {
				this.$router.push({
					name: '/dept/update',
					params: {
						id: row.id
					}
				})
			},
			//删除
			handleDelete(row) {
				this.delVisible = true;
				this.form.id = row.id;
			},
			// 确定删除
			deleteRow() {
				let that = this;
				//发送请求
				that.HttpUtil.encryptDelete(
					that,
					that.Global.URLPATH.DEPT_DELETE + that.form.id, {
						hospital: JSON.parse(sessionStorage.getItem('userMap')).hospital,
						token: sessionStorage.getItem("token"),
						type: 1
					},
					function(data) {
						that.delVisible = false;
						that.getTableList();
						that.$message.success("删除成功:");
					},
					function(data) {
						that.delVisible = false;
						that.$message.success("删除失败:" + data.msg);
					});
			},
		},

	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 10px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		padding-left: 66%;
		display: inline-block;
	}

	.del-dialog-cnt {
		font-size: 16px;
		text-align: center
	}

	.parent {
		padding: 30px;
		background: #fff;
		border: 1px solid #ddd;
		border-radius: 5px;
	}

	.tree-left {
		width: 20%;
		height: 100%;
		float: left;
	}

	.div-right {
		width: 80%;
		height: 100%;
		float: left;
	}
</style>
